<template>
  <div class="result">
    <h2>得分明细</h2>
    <nav>
      <div :class="[clickId == 1 ? 'active1' : '']" @click="navCheck('1')">
        <img src="../assets/img/1.png" alt="" />
        <div>
          <!-- <span style="color: #da9099">10/30</span> -->
          <span>对话质量</span>
        </div>
      </div>
      <div :class="[clickId == 2 ? 'active1' : '']" @click="navCheck('2')">
        <img src="../assets/img/2.png" alt="" />
        <div>
          <!-- <span>20/30</span> -->
          <span>话术规范</span>
        </div>
      </div>
      <div :class="[clickId == 3 ? 'active1' : '']" @click="navCheck('3')">
        <img src="../assets/img/3.png" alt="" />
        <div>
          <!-- <span style="color: #8dd1c7">30/30</span> -->
          <span>情绪得分</span>
        </div>
      </div>
    </nav>

    <div class="nav-Content">
      <div class="nav1" v-show="clickId == 1">
        <div class="nav1-lef">
          <div class="tips">对话数据</div>
          <div class="echart">
            <div class="table">
              <div class="table-tr thead">
                <div class="table-th visibilityHid">1111</div>
                <div class="table-th active">数据</div>
                <div class="table-th active">评价</div>
              </div>
              <div class="table-tr tbody">
                <div class="table-th active"><p>停顿时长（min）</p></div>
                <div class="table-th"><p>5.25</p></div>
                <div class="table-th">略长</div>
              </div>
              <div class="table-tr tbody">
                <div class="table-th active"><p>平均语速（字/s）</p></div>
                <div class="table-th">
                  <p>{{ avg(SpeakSpeed) }}</p>
                </div>
                <div class="table-th">{{ avg(SpeakSpeed) > 5 ? '过快' : avg(SpeakSpeed) > 3 ? '正常' : '过慢' }}</div>
              </div>
              <!-- <div class="table-tr tbody">
                <div class="table-th active"><p>环节得分</p></div>
                <div class="table-th">
                  <p>{{ (resultdata.totalscore * 100) / 100 }}</p>
                </div>
                <div class="table-th">{{ (resultdata.totalscore * 100) / 100 >= 60 ? '合格' : '不合格' }}</div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="nav1-rig">
          <div class="tips">语速趋势</div>
          <div class="echart" id="echarts1"></div>
        </div>
      </div>
      <div class="nav2" v-show="clickId == 2">
        <div class="nav1-lef">
          <div class="tips">
            <span>对话关键点</span>

            <span>得分:{{ allresultdata() }}</span>
          </div>
          <div class="echart" id="echarts2"></div>
        </div>
        <div class="nav1-rig rigcss">
          <div class="tips">
            <span>话术拟合</span>

            <span>整体拟合度:{{ showdataTwo().all || 0 }}%</span>
          </div>
          <div class="nav2Css">
            <tableShow :showdata="showdataTwo().list" />
          </div>
        </div>
      </div>
      <div class="nav3" v-show="clickId == 3">
        <div class="tips">情绪趋势</div>
        <div id="echarts3"></div>
      </div>
    </div>
  </div>
</template>
<script>
import tableShow from '../components/Table2show.vue';
import { mapState, mapMutations } from 'vuex';
import assetsData from '../utils/assets.js';
export default {
  name: 'result',
  data() {
    return {
      examid: '',
      clickId: 1,
      resultdata: {}, //考试结束的数据
      SpeakSpeed: [], //   语速
      ExpressionList: [], // 表情列表
      ShowExpressionList: [], // 表情
      // getAnswerListData: {}, // 对话数据
    };
  },
  methods: {
    ...mapMutations(['setResultdata']),
    // 拟合度

    similar(data1, data2) {
      return Math.ceil(assetsData.similar(data1, data2) * 100);
    },

    // 取平均值
    avg(data) {
      let count = 0;
      data.forEach(item => {
        count += item;
      });
      return Math.ceil((count / data.length || 1) * 10) / 10;
    },
    DrowEchart(dom) {
      var dom;
      var app = {};
      var option;
      var echarts = require('echarts');
      var chartDom = document.getElementById(dom);
      var myChart = echarts.init(chartDom);
      if (myChart == null) {
        myChart = echarts.init(dom);
      }

      if (dom == 'echarts1') {
        let data = this.SpeakSpeed;

        let Xdata = [];
        data.forEach((element, index) => {
          Xdata.push(index);
        });
        option = {
          xAxis: {
            type: 'category',
            data: Xdata,
          },
          yAxis: {
            type: 'value',
          },
          color: ['#9AB4D2'],
          grid: {
            top: '2%',
            left: '2%',
            right: '0%',
            bottom: '1%',
            containLabel: true,
          },
          series: [
            {
              data: data,
              type: 'line',
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(154, 180, 210, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(118, 143, 172, 0.01)',
                  },
                ]),
              },
            },
          ],
        };
      }
      if (dom == 'echarts3') {
        let data = this.ShowExpressionList;
        let Xdata = [];
        let Ydata = [];
        let obj = {};
        data.forEach((item, index) => {
          if (obj[item]) {
            obj[item].push([index, item ? assetsData.emotion3[item] : 50]);
          } else {
            obj[item] = [];
            obj[item].push([index, item ? assetsData.emotion3[item] : 50]);
          }
          Xdata.push(index + 1);
          // Ydata.push([index + 1, item ? assetsData.emotion3[item] : 50]);
        });
        let keysList = Object.keys(obj);
        let keyList2 = [];
        keysList.forEach(item => {
          Ydata.push({
            symbolSize: 20,
            data: obj[item],
            type: 'scatter',
            name: assetsData.emotionName[item] || '中性',
          });
          keyList2.push(assetsData.emotionName[item] || '中性');
        });
        console.log(obj, Ydata);
        console.log(keyList2);
        option = {
          legend: {
            data: keyList2,
          },
          xAxis: {
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
          yAxis: {},
          series: Ydata,
          // series: [
          //   {
          //     symbolSize: 20,
          //     data: Ydata,
          //     type: 'scatter',
          //   },
          // ],
        };
        //  option = {
        //   tooltip: {
        //     trigger: 'axis',
        //   },
        //   grid: {
        //     left: '4%',
        //     right: '4%',
        //     bottom: '4%',
        //     containLabel: true,
        //   },
        //   xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: Xdata,
        //   },
        //   yAxis: {
        //     type: 'value',
        //   },
        //   series: [
        //     {
        //       type: 'line',
        //       stack: '总量',
        //       smooth: true,
        //       data: Ydata,
        //     },
        //   ],
        // };
      }
      if (dom == 'echarts2') {
        let data = this.showoneList();
        let Xdata = Object.keys(data);
        let Ydata = [];
        Xdata.forEach(item => {
          let count = 0;
          let alldata = 0;
          data[item].forEach(item2 => {
            count += item2.score - 0;
            alldata += item2.fullscore - 0;
          });
          // Ydata.push(count * 1);
          Ydata.push({
            type: 'bar',
            data: [Math.round((count / alldata) * 100) || 0],
            coordinateSystem: 'polar',
            name: item,
            itemStyle: {
              opacity: 0.8,
              borderWidth: 1,
            },
          });
        });
        console.log(Ydata);
        option = {
          angleAxis: {
            max: 100,
            startAngle: 10,
            splitLine: {
              show: false,
            },
          },
          grid: {
            top: '2%',
            left: '2%',
            right: '0%',
            bottom: '1%',
            containLabel: true,
          },
          radiusAxis: {
            type: 'category',
            data: ['得分率'],
            show: false,
          },
          tooltip: {
            trigger: 'axis',
          },
          polar: {
            center: ['50%', '60%'],
          },
          series: Ydata,

          legend: {
            show: true,
            top: '0',
            data: Xdata,
          },
        };

        // option = {
        //   angleAxis: {},
        //   radiusAxis: {
        //     type: 'category',
        //     data: Xdata,
        //     max: 0,
        //   },
        //   polar: {
        //     center: ['50%', '50%'],
        //   },
        //   series: [
        //     {
        //       type: 'bar',
        //       data: Ydata,
        //       coordinateSystem: 'polar',
        //       emphasis: {
        //         focus: 'series',
        //       },
        //     },
        //   ],
        //   legend: {
        //     show: true,
        //     data: Xdata,
        //   },
        // };
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },

    // 生成 多少位随机数
    random(len, start, end) {
      var arr = [];
      function creat(start, end) {
        var numlen = end - start;
        return parseInt(Math.random() * numlen + start);
      }
      while (arr.length < len) {
        var num = creat(start, end);
        if (arr.indexOf(num) == -1) {
          arr.push(num);
        }
      }
      return arr;
    },
    navCheck(num) {
      this.clickId = num;
      this.$nextTick(() => {
        if (num == 1) {
          this.DrowEchart('echarts1');
        } else if (num == 2) {
          console.log('2222');
          this.DrowEchart('echarts2');
        } else {
          this.DrowEchart('echarts3');
        }
      });
    },

    showoneList() {
      if (!this.resultdata.detail) return;
      let obj = {};
      this.resultdata.detail.forEach(item => {
        if (!obj[item.scene]) {
          obj[item.scene] = [];
          obj[item.scene].push(item);
        } else {
          obj[item.scene].push(item);
        }
      });
      return obj;
    },

    // 获取考试得分
    getExamData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      this.$axios
        .Postdata('manage/Voicerecordreport.asmx/getExamScore', {
          data: JSON.stringify(
            this.$Help.QMdata({
              // examid: '3275',
              examid: this.examid,
            })
          ),
        })
        .then(res => {
          loading.close();
          this.setResultdata(res);
          this.resultdata = res;
          this.navCheck(this.clickId);
        })
        .catch(res => {
          this.$message.error('网络错误');
          loading.close();
        });
    },
    //  获取对话
    getAnswerListFun() {
      this.$axios
        .Postdata('manage/Voicerecordreport.asmx/getAnswerList', {
          data: JSON.stringify(
            this.$Help.QMdata({
              // examid: '3275',
              pageindex: '',
              pagesize: 0,
              examid: this.examid,
            })
          ),
        })
        .then(res => {
          // this.getAnswerListData = res;
        });
    },

    showdataTwo() {
      let data = this.showoneList();
      if (!data) return { list: [], all: 0 };
      let keysList = Object.keys(data);
      // console.log(keysList);
      let arr = [];
      let count = 0;
      keysList.forEach(item => {
        let arr3 = [];
        let obj = {
          name: item,
          score: 0,
          name2: '',
          name3: '',
          similar: 0,
        };
        data[item].forEach(item2 => {
          obj.score += item2.score - 0;
          let num = this.similar(item2.standsentence, item2.allsentence) || 0;
          obj.similar += num - 0;
          // count += num - 0;
          arr3.push({
            name: item2.sentence,
            name2: item2.standsentence || '无',
            name3: item2.allsentence || '无',
            score: item2.score - 0,
            similar: num,
          });
        });
        obj.similar = Math.ceil(obj.similar / data[item].length);
        count += obj.similar - 0;
        arr = [...arr, ...[obj], ...arr3];
      });

      // return { list: arr, all: Math.ceil(count / keysList.length) };
      return { list: arr, all: Math.ceil(count / keysList.length) || 0 };
    },

    allresultdata() {
      let num = 0;
      let count = 0;
      if (!this.resultdata.detail) return;
      this.resultdata.detail.forEach(item => {
        num += item.score - 0;
        count += item.fullscore - 0;
      });
      console.log(Math.round((num / count) * 100 || 0));
      return Math.round((num / count) * 100 || 0);
    },
  },
  mounted() {},
  created() {
    this.examid = localStorage.getItem('examid');
    this.getExamData();
    // this.getAnswerListFun();
    this.SpeakSpeed = JSON.parse(localStorage.getItem('SpeakSpeed')); // 语速
    this.ShowExpressionList = JSON.parse(localStorage.getItem('ShowExpressionList')); // 表情
    this.ExpressionList = JSON.parse(localStorage.getItem('ExpressionList')); // 表情绘总
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
  },
  components: {
    tableShow,
  },
};
</script>
<style lang="less" scoped>
.result {
  width: 100%;
  height: 90vh !important;
  overflow-y: scroll;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: hidden;
}
.nav2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex: 1;
}
.nav2 .nav1-lef {
  flex: 1;
}

.result {
  display: flex;
  flex-direction: column;
  height: 100%;
}
h2 {
  height: 60px;
  font-size: 22px;
  font-weight: bold;
  line-height: 60px;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  padding: 0 20px;
}
nav {
  display: flex;
  justify-content: space-around;
  border-bottom: 60px solid #ebeff3;
  img {
    width: 60px;
    height: 60px;
  }
  div {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    border-bottom: 3px solid transparent;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      span {
        line-height: 24px;
        font-size: 18px;
        color: #d08ab8;
        &:last-of-type {
          font-weight: bold;
          color: #818181;
        }
      }
    }
  }
  .active1 {
    border-bottom: 3px solid #8fc2fe;
  }
}
.nav-Content {
  box-sizing: border-box;

  overflow-x: hidden;
  height: 100%;
}
.tips {
  box-sizing: border-box;
  height: 60px;
  line-height: 60px;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: 24px;
  font-weight: bold;
  color: #7f7f7f;
  margin: 40px;
}
.tips > span:last-of-type {
  height: 30px;
  background-color: #5b9bd5;
  padding: 5px 20px;
  line-height: 30px;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
}
.tips::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 14px;
  box-sizing: border-box;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #368cf3;
  transform: translateY(-50%);
}
.echart {
  flex: 1;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 40px;
  .table-th {
    padding: 10px 60px;
    box-sizing: border-box;
  }
}
.nav1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.active {
  background-color: #eaeff5;
}
.visibilityHid {
  visibility: hidden;
}
#echarts1 {
  flex: 1;
  height: 315px;
  width: 40vw;
  box-sizing: border-box;
  margin-left: 20px;
}

.nav3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#echarts3 {
  flex: 1;
}

.table,
.table * {
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
}
.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  color: #303030;
  font-size: 16px;
}
.thead {
  height: 44px;
  background: #eaeff5;
  line-height: 44px;
}
.table-tr {
  display: table-row;
}
.table-th {
  display: table-cell;
  height: 100%;
  border: 1px solid #dcdcdd;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.table-td {
  display: table-cell;
  height: 100%;
  border: 1px solid gray;
  text-align: center;
  vertical-align: middle;
}
.tbody .table-th {
  color: #303030;
  font-size: 16px;
}

.tbody p {
  line-height: 44px;
  border-bottom: 1px solid #dcdcdd;
}
.tbody p:nth-child(2n) {
  background-color: #f4f4f4;
}
.tbody p:last-of-type {
  border-bottom: none;
}
.nav2Css {
  box-sizing: border-box;
  .table-th {
    box-sizing: border-box;
    padding: 5px 10px;
  }
}
#echarts2 {
  flex: 1;
  height: 700px;
}
.rigcss {
  max-width: 60%;
  width: 60%;
}
</style>
